import React, { Component } from 'react'

export default class App extends Component {
	// !在constructor中定义, super必须写在前面 可以传参
	// constructor() {
	// 	super()
	// 	this.state = {
	// 		age: 18
	// 	}
	// }

	// !直接定义 不可以传参
	state = {
		age: 18,
		arr: [ { id: 1, name: 'VUE' }, { id: 2, name: 'React' }, { id: 3, name: 'Angular' } ]
	}

	// 两种状态的差异：
	// 1. constructor中定义 在new的时候可以传参，传递的参数可以作为状态
	// 2.state={}中定义不可以传参

	// !使用
	render() {
		// 通过对state解构来方便使用state的数据
		const { age, arr } = this.state
		return (
			<div>
				状态的使用:
				<p>年龄:{age}</p>
				<p>列表:</p>
				<ul>{arr.map((item) => <li key={item.id}>{item.name}</li>)}</ul>
			</div>
		)
	}
}
